<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科泰聊天室</title>
  <link href="css/chat.css" rel="stylesheet">
  </link>
</head>

<body>
  <!-- TODO 根据HTML结构分析，定义出父组件和子组件结构 -->
  <div id="app">
    <h1 class="title center">科泰聊天室</h1>
    
    <chat-message></chat-message>
  </div>
  <!-- 父组件 -->
  <template id="chat-message">
    <div class="chat-window center">
      <div class="chat-messages">
        <div class="message received-message">
          <div class="message-received">
            <img src="images/avt-01.png" class="avatar"> 
            <span class="message-content">好久不见！</span>
          </div>
        </div>
        <div class="message sent-message">
          <div class="message-sent">
            <span class="message-content">是啊，好久不见了</span> 
            <img src="images/avt-02.png" class="avatar">
          </div>
        </div>
        <div class="message received-message">
          <div class="message-received"><img src="images/avt-01.png" class="avatar"> <span
              class="message-content">最近怎么样？</span></div>
        </div>
        <div class="message sent-message" v-for="item in messages">
          <div class="message-sent">
            <span class="message-content">{{item.text}}</span> 
            <img src="images/avt-02.png" class="avatar">
          </div>
        </div>
      </div>

      <message @add="addMessage"></message>
    </div>
  </template>
  <!-- 子组件 -->
   <template id="message">
    <div class="chat-input"><input type="text" placeholder="请输入消息..." v-model="msg"> <button @click="add(msg)">发送</button></div>
   </template>

  <script src="js/vue.js"></script>
  <script>
 // TODO 根据HTML结构分析，定义出父组件和子组件结构
    // 子组件
    const message = {
        template: "#message",
        data() {
          return{
            msg: ''
          }
        },
        props:[
          'text'
        ],
        methods:{
          add(text){
            console.log('子组件',text);
            this.$emit('add', text);
            this.msg = '';
          }
        }
    }
        // 父组件
        const chatMessage = {
      template: "#chat-message",
      data() {
        return{
          messages: []
        }
      },
      components: {
        'message': message
      },
      methods:{
        addMessage(msgText){
          console.log('父组件',msgText);
          this.messages.push({text: msgText})
        }
      } 
    }
    const app = new Vue({
      el: '#app',
      components:{
        'chat-message': chatMessage
      }
    })
  </script>
</body>

</html>